---
interface Props {
  id: string;//按钮id
  tooltipText: string;//提示文本
  tooltipPlacement?: string;//提示位置
  tooltipTrigger?: string;//触发方式
  classStyle?: string;//类名
}

const { 
  id, 
  tooltipText, 
  tooltipPlacement = "left", 
  tooltipTrigger = "hover",
  classStyle="",
} = Astro.props;

---

<div class={classStyle}>
  <button
    id={id}
    type="button"
    data-tooltip-target={`tooltip-${id}`}
    data-tooltip-placement={tooltipPlacement}
    data-tooltip-trigger={tooltipTrigger}
    class="flex justify-center items-center w-8 h-8 text-black dark:text-white cursor-pointer"
  >
    <slot></slot>
    <span class="sr-only">{tooltipText}</span>
  </button>
  <div
    id={`tooltip-${id}`}
    role="tooltip"
    class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-nowrap text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
  >
    {tooltipText}
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>
</div>